<template>
  <div class="d_main not">
    <div class="d_header">
      <div class="d_header_title">
        <div class="back pointer" @click="handleBack">
          <span class="el-icon-arrow-left"></span>
          <p>返回</p>
        </div>
        <h3>产品详情</h3>
      </div>
      <div class="d_header_btn">
        <el-button
          type="primary"
          size="small"
          @click="handleIsLocked"
          >{{ isLockedName }}</el-button
        >
      </div>
    </div>
    <div class="d_mainCenter p0 flex">
      <div class="left_tag">
        <p
          class="nav1"
          :class="tabIndex == index ? 'active' : ''"
          v-for="(item, index) in tagList"
          :key="index"
          @click="handleTagClick(item, index)"
        >
          {{ item.title }}
        </p>
      </div>
      <div class="container pl16 pt10 section" @scroll="scrollEvent">
          <!-- 基础信息 -->
          <div class="items" id="1">
            <basicsInfo :formModel="formModel.baseData" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 成品型号 -->
          <div class="items" id="2">
            <productModel :formModels="formModel" :productCode="$route.query.productCode" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 阶梯价格 -->
          <div class="items" id="3">
            <steppedPrice :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 产品信息 -->
          <div class="items" id="4">
            <productInfo  :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 标签信息 -->
          <div class="items" id="5">
            <labelInfo :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 彩稿上传 -->
          <div class="items" id="6">
            <colorManuscript :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 颜色信息 -->
          <div class="items" id="7">
            <colorInfo :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" />
          </div>
          <!-- 生产信息 -->
          <div class="items" id="8">
            <productionInfo :formModel="formModel.baseData" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)" />
          </div>
          <!-- 材料信息 -->
          <div class="items" id="9">
            <materialInfo  :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)"/>
          </div>
          <!-- 工艺信息 -->
          <div class="items" id="10">
            <workmanship :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)"  />
          </div>
          <!-- 包装信息 -->
          <div class="items" id="11">
            <packingInfo  :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" :isLocked="$route.query.isLocked" @init="getDetail($route.query.productCode)"/>
          </div>
          <!-- 装箱信息 -->
          <div class="items" id="12">
            <boxInfo :formModel="formModel" :isShowEdits="isShowEdit" @showEditEvent="showEditEvent" :productCode="$route.query.productCode" @init="getDetail($route.query.productCode)" />
          </div>
      </div>
    </div>
  </div>
</template>
      <script>
import basicsInfo from "../components/basicsInfo/index";
import productModel from "../components/productModel/index";
import steppedPrice from "../components/steppedPrice/index";
import productInfo from "../components/productInfo/index";
import labelInfo from "../components/labelInfo/index";
import colorManuscript from "../components/colorManuscript/index";
import colorInfo from "../components/colorInfo/index";
import productionInfo from "../components/productionInfo/index";
import materialInfo from "../components/materialInfo/index";
import workmanship from "../components/workmanship/index";
import packingInfo from "../components/packingInfo/index";
import boxInfo from "../components/boxInfo/index";
import { mapGetters } from "vuex";
export default {
  name: "productionOrderNewDetail",
  components: {
    basicsInfo,
    productModel,
    steppedPrice,
    productInfo,
    labelInfo,
    colorManuscript,
    colorInfo,
    productionInfo,
    materialInfo,
    workmanship,
    packingInfo,
    boxInfo,
  },
  computed: {
    ...mapGetters(["userInfo", "name"]),
  },
  data() {
    return {
      tagList: [
        {
          title: "基础信息",
        },
        {
          title: "成品型号",
        },
        {
          title: "阶梯价格",
        },
        {
          title: "产品信息",
        },
        {
          title: "标签信息",
        },
        {
          title: "彩稿上传",
        },
        {
          title: "颜色信息",
        },
        {
          title: "生产信息",
        },
        {
          title: "材料信息",
        },
        {
          title: "工艺信息",
        },
        {
          title: "包装信息",
        },
        {
          title: "装箱信息",
        },
      ],
      tabIndex:0,
      isLockedName:'',
      formModel:{},
      isShowEdit:true,
    };
  },
  created() {
    this.getDetail(this.$route.query.productCode);
    if (this.$route.query.type == "see") {
      this.allDisable = true;
    } else {
      this.allDisable = false;
    }
  },
  mounted() {},
  methods: {
    //详情滑动事件
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll(".items");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.tabIndex = i;
          break;
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        // this.tabIndex = this.tagList.length
      }
    },

     //左侧tab栏点击事件
     handleTagClick(item, index) {
      this.tabIndex = index;
      let jump = document.querySelectorAll(".items");
      jump[index].scrollIntoView({ block: "start", behavior: "smooth" });
    },


    //锁定/解锁
    handleIsLocked() {
      let state
      if(this.formModel.baseData.isLocked == 0){
        state = 1;
      } else {
        state = 0;
      }
      let obj = {
        state: state,
        productCode: this.$route.query.productCode,
      };
      this.$api.business.UpdateProductState(obj).then((res) => {
        this.$message.success("设置成功");
        if(state === 0){
          this.getDetail(this.$route.query.productCode);
        }else{
          this.handleBack()
        }
      });
    },

    showEditEvent(e){
      this.isShowEdit = e
    },


    //获取详情
    getDetail(id) {
      const parmas = {
        queryBy: 2,
        queryValue: id,
      };
      this.$api.business.GetSingleProductByProductCode(parmas).then((res) => {
        console.log(res)
        // if(res.baseData.productStyle == 0){
        //   res.baseData.productStyle = ''
        // }
        // if(res.baseData.outDirection == 0){
        //   res.baseData.outDirection = ''
        // }
        // if(res.baseData.scrollDirection == 0){
        //   res.baseData.scrollDirection = ''
        // }
        // if(res.baseData.tagAffixWay == 0){
        //   res.baseData.tagAffixWay = ''
        // }
        this.formModel = res;
        if(this.formModel.baseData.isLocked == 0){
          this.isLockedName = '锁定'
        }else{
          this.isLockedName = '解锁'
        }

        console.log(this.formModel)
        
      });
    },

    // 返回
    handleBack() {
      this.$router.go(-1);
    },
  },
};
</script>
      <style lang="scss" scoped>
.left_tag {
  width: 120px;
  height: 100%;
  border-right: 1px solid rgb(238, 238, 238);
  background-color: #fff;
  p {
    padding: 11px 0;
    position: relative;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
  }
}

.active {
  color: #3f61f1;
  &::after {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background: #3f61f1;
  }
}

.container {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

.el-form-item .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff !important;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  line-height: 146px;
  text-align: center;
}
::v-deep .avatar {
  width: 146px;
  height: 146px;
  display: block;
}

.img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.border_line {
  border-bottom: 1px solid #e6e6e6;
}

.tips {
  margin-top: 8px;
  display: inline-block;
  font-size: 12px;
  color: #999aaa;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
      